<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.component Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <div>this is app component</div>
    <div>
      <span>{{ message }}</span>
    </div>
    <hr>
    <!-- 直接使用全局注册的组件 -->
    <my-component @get="transmissonMsg"></my-component>
  </div>
  <script>
    // 使用 Vue.component 全局注册一个组件
    Vue.component('my-component', {
      template:
        `
        <div>
          <p>{{message}}</p>
          <button @click="$emit('get')">show</button>
        </div>
      `,
      data() {
        return {
          message: 'my-component!'
        };
      },

    });

    // 创建 Vue 实例
    new Vue({
      el: '#app',
      data: {
        message: false
      },
      methods: {
        transmissonMsg() {
          this.message =  !this.message;
        }
      },
    });
  </script>
</body>

</html>